<template>
    <view>
        <!-- pages/user/order/logistics/index.wxml -->
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>
        <view class="but" >
			
            <van-tabs  swipe-threshold="3" color="#FFDC8D" :active="activeIndex" @change="selectLabel" v-if="ifShow==true">
                <van-tab :title="'包裹' + (index + 1)" :name="activeIndex" v-for="(item, index) in list" :key="index">
                    <view class="but-bg-hr"></view>

                    <view class="topExpress-right">
                        <view class="topExpress-right-middle">
                            {{ list[activeIndex].logistics_name }}：
                            <span>{{ list[activeIndex].logistics_number }}</span>
                        </view>
                        <view class="topExpress-code-copy" @tap="copyCode($event, { code: list[activeIndex].logistics_number })" :data-code="list[activeIndex].logistics_number">
                            <image :src="imgUrl + '/imgs/user/copy.png'"></image>
                        </view>
                    </view>

                    <view v-if="traces.length > 0">
                        <view class="express-container">
                            <view class="express-item" v-for="(item, index1) in traces" :key="index1">
                                <!-- 左边子容器 -->

                                <view class="express-middle-axis">
                                    <!-- 显示顶部收的圆点 -->
                                    <view class="dot-shou" v-if="index == 0">收</view>
                                    <!-- 正在进行的时间轴上半个时间线 -->
                                    <view class="online-top-closing"></view>
                                    <!-- 正在进行的时间轴点 -->
                                    <view class="dot-closing"></view>
                                    <!-- 正在进行的时间轴下半个时间线 -->
                                    <view class="online-bottom"></view>
                                    <!-- 显示尾部的圆点 -->
                                    <view class="dot-closing" v-if="index == list.length - 1"></view>
                                </view>

                                <!-- 右边子容器 -->

                                <view class="express-right">
                                    <view class="express-status-time">
                                        {{ item.AcceptTime }}
                                        <span>{{ item.Tip }}</span>
                                    </view>
                                    <view class="express-status-address">{{ item.AcceptStation }}</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="buttom" v-else>
                        <text>暂时没有物流信息,请稍后再来~</text>
                    </view>
                </van-tab>
            </van-tabs>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';

// pages/user/order/logistics/index.js
const Config = require('../../../../config/index.js');

const Api = require('../../../../api/index.js');

export default {
    components: {
        navber,
    },
    data() {
        return {
            navbarData: {
                title: '物流动态' //顶部标题
            },

            //导航栏
            imgUrl: Config.imgUrl,

            //图片url
            logisticsId: 0,

            list: [],
            traces: [],
            order_id: '',
            activeIndex: 0,
            logistics_number: '',
			ifShow:false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var order_id = options.id ? options.id : 0;
        var index = options.index ? options.index : 0;
        var logisticsId = options.lid ? options.lid : 0;
        this.setData({
            order_id: order_id,
            activeIndex: index,
            logisticsId: logisticsId
        });
        this.getData();
    },
    onPullDownRefresh(e) {
        this.getData();
        uni.stopPullDownRefresh();
    },
    methods: {
        copyCode(e, _dataset) {
            
            // if (!e.currentTarget) {
            //     if (_dataSet.tagId) {
            //         e.currentTarget = {
            //             id: _dataSet.tagId
            //         };
            //     } else {
            //         e.currentTarget = {
            //             dataset: _dataSet
            //         };
            //     }
            // } 
            //复制快递单号
            // console.log(e.currentTarget.dataset.code);
            const code = e.currentTarget.dataset.code;
            uni.setClipboardData({
                data: code,

                success(res) {
                    uni.getClipboardData({
                        success(res) {
                            console.log(res.data); // data
                        }
                    });
                }
            });
        },

        selectLabel(event, _dataset) {
            
            if (!event.currentTarget) {
                if (_dataSet.tagId) {
                    event.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    event.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var index = event.detail.index;
            var logistics_id = this.list[activeIndex].id;
            this.setData({
                activeIndex: index,
                logisticsId: logistics_id
            }); //选择项

            this.getData();
        },

        getData() {
            //获取数据
            var json = {
                order_id: this.order_id,
                logistics_id: this.logisticsId
            };
			
            Api.userOrderLogistics(json).then((res) => {
                if (res.code == 1) {
                    this.setData({
                        list: res.data.list,
                        traces: res.data.traces,
						ifShow:true
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
